{extend name="common/page"}
{block name="content"}
<form class="layui-form" action="">
    <div id="methods"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限名</label>
        <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入权限名" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限分类</label>
        <div class="layui-input-block">
            <select name="category_id" lay-verify="required" lay-search>
                <option value></option>
                {volist name="categories" id="category"}
                <option value="{$category.id}">{$category.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">模块</label>
        <div class="layui-input-block">
            <input type="text" name="m" required lay-verify="required" placeholder="请输入模块" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">控制器</label>
        <div class="layui-input-block">
            <input type="text" name="c" required lay-verify="required" placeholder="请输入控制器" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">操作</label>
        <div class="layui-input-block" id="get-methods">
            <input type="text" name="a" required lay-verify="required" placeholder="请输入操作" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">显示</label>
        <div class="layui-input-block">
            <input type="radio" name="display" value="1" title="是">
            <input type="radio" name="display" value="2" title="否" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input value="100" type="number" name="list_order" required lay-verify="required" placeholder="请输入排序1-999整数，小在前" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="note" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addForm">增加</button>
        </div>
    </div>
</form>
{/block}

{block name="style"}
{__block__}
<style>
    #methods{
        border: 1px solid #EEE;
        min-width: 150px;
        position: absolute;
        z-index: 999;
        display: none;
    }
    #methods ul li{
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        display: block;
        background-color: #FFF;
    }
    #methods ul li:hover{
        background-color: #EEEEEE;
    }
</style>
{/block}
{block name="script"}
<script>
    layui.use(['form'], function () {
        $k.submit('addForm', '/privilege/add', function () {
            $k.reload(parent.tableInst, '/privilege');
            $k.adminClose();
        })
    })

    var methodsBox = $('#methods');
    var methodInput = $('#get-methods input');

    $('body').click(function (e) {
        var target = $(e.target);
        if (!target.is('#methods *') && !target.is('#get-methods *')) {
            if (methodsBox.is(':visible')) {
                methodsBox.slideUp();
            }
        }
    });

    methodInput.focus(function () {
        var c = $('input[name="c"]').val();
        var of = methodInput.offset();
        methodsBox.css('top', of.top + 40);
        methodsBox.css('left', of.left);

        if (c.length === 0) return;
        var url = '/privilege/methods?name=' + c;
        $.get(url)
            .then(function (value) {
                console.log(value)
                var str = '<ul>';
                for (var i in value) {
                    str += '<li>'+value[i].name+'</li>';
                }
                str += '</ul>';
                methodsBox.empty().append(str);
                methodsBox.slideDown(function () {
                    var lis = methodsBox.find('li');
                    lis.click(function () {
                        console.log($(this))
                        methodInput.val($(this).text());
                        methodsBox.slideUp();
                    })
                });

            })
            .fail(function (error) {
                console.log(error)
            })
    });



</script>
{/block}